<template>
  <view class="container">
    <!-- 标题 -->
    <view class="title">好的，今天我们来做菜！</view>

    <!-- 搜索框 -->
    <view class="search-row">
      <input class="search-input" v-model="searchText" placeholder="搜索菜谱" />
      <button class="search-btn" @click="refreshRandomRecipes">搜索</button>
    </view>

    <!-- 推荐数量选择 -->
    <view class="count-row">
      <text class="count-label">推荐数量：</text>
      <button class="count-btn" @click="decCount">-</button>
      <text class="count-value">{{ recipeCount }}</text>
      <button class="count-btn" @click="incCount">+</button>
    </view>

    <!-- 随机推荐按钮 -->
    <button class="random-btn" @click="refreshRandomRecipes">随机推荐</button>

    <!-- 菜谱卡片列表 -->
    <view class="recipe-list">
      <view v-for="recipe in randomRecipes" :key="recipe.id" class="recipe-card" @click="goToDetail(recipe.id)">
        <view class="card-title">{{ recipe.name }}</view>
        <view class="card-utensils">
          <text v-for="ut in recipe.utensils" :key="ut">{{ getUtensilEmoji(ut) }}</text>
        </view>
        <view class="card-emoji">{{ getMainIngredientEmoji(recipe) }}</view>
      </view>
    </view>

    <view style="flex:1" />

    <!-- 底部导航栏 -->
    <view class="tabbar">
      <view class="tabbar-item" @click="goTo('index')">
        <text class="tabbar-emoji">🏠</text>
        <text class="tabbar-label">首页</text>
      </view>
      <view class="tabbar-item active">
        <text class="tabbar-emoji">🍽️</text>
        <text class="tabbar-label">吃什么</text>
      </view>
      <view class="tabbar-item" @click="goTo('my')">
        <text class="tabbar-emoji">👤</text>
        <text class="tabbar-label">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getAllRecipes } from '@/utils/recipe-util.js'
export default {
  data() {
    return {
      searchText: '',
      recipeCount: 5,
      randomRecipes: [],
      allRecipes: []
    }
  },
  async onShow() {
    await this.loadAllRecipes()
    this.refreshRandomRecipes()
  },
  methods: {
    async loadAllRecipes() {
      this.allRecipes = await getAllRecipes()
    },
    refreshRandomRecipes() {
      let filtered = this.allRecipes.filter(r => r.name.includes(this.searchText))
      let arr = [...filtered]
      let result = []
      for (let i = 0; i < this.recipeCount && arr.length > 0; i++) {
        let idx = Math.floor(Math.random() * arr.length)
        result.push(arr[idx])
        arr.splice(idx, 1)
      }
      this.randomRecipes = result
    },
    decCount() {
      if (this.recipeCount > 1) {
        this.recipeCount--
        this.refreshRandomRecipes()
      }
    },
    incCount() {
      this.recipeCount++
      this.refreshRandomRecipes()
    },
    getMainIngredientEmoji(recipe) {
      const v = recipe.ingredients.vegetables
      const m = recipe.ingredients.meats
      const s = recipe.ingredients.staples
      if (v && v.length > 0) return this.getIngredientEmoji(v[0])
      if (m && m.length > 0) return this.getIngredientEmoji(m[0])
      if (s && s.length > 0) return this.getIngredientEmoji(s[0])
      return '🍽️'
    },
    getIngredientEmoji(name) {
      switch (name) {
        case '土豆': return '🥔'
        case '胡萝卜': return '🥕'
        case '花菜': return '🥦'
        case '白萝卜': return '🥗'
        case '西葫芦': return '🥒'
        case '茄子': return '🍆'
        case '芹菜': return '🥬'
        case '黄瓜': return '🥒'
        case '洋葱': return '🧅'
        case '菌菇': return '🍄'
        case '豆腐': return '🧊'
        case '包菜': return '🥬'
        case '白菜': return '🥬'
        case '牛肉': return '🥩'
        case '香肠': return '🌭'
        case '腊肠': return '🥓'
        case '鸡肉': return '🍗'
        case '猪肉': return '🥩'
        case '鸡蛋': return '🥚'
        case '虾': return '🦐'
        case '骨头': return '🦴'
        case '鱼': return '🐟'
        case '面条': return '🍜'
        case '面包': return '🍞'
        case '米': return '🍚'
        case '方便面': return '🍜'
        default: return '🍽️'
      }
    },
    getUtensilEmoji(name) {
      switch (name) {
        case '烤箱': return '🧑‍🍳'
        case '空气炸锅': return '🔥'
        case '微波炉': return '📱'
        case '电饭煲': return '🍚'
        case '一口能炒又能煮的大锅': return '🥘'
        default: return '🍽️'
      }
    },
    goToDetail(id) {
      // 跳转到菜谱详情页，后续可完善
      uni.navigateTo({ url: '/pages/recipe-detail/recipe-detail?id=' + id })
    },
    goTo(page) {
      if (page === 'index') {
        uni.reLaunch({ url: '/pages/index/index' })
      } else if (page === 'my') {
        uni.redirectTo({ url: '/pages/my/my' })
      } else if (page === 'recipe-test') {
        uni.redirectTo({ url: '/pages/recipe-test/recipe-test' })
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #fff;
}
.title {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin: 32rpx 0 24rpx 0;
}
.search-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24rpx;
  margin-bottom: 16rpx;
}
.search-input {
  flex: 1;
  height: 64rpx;
  border-radius: 32rpx;
  border: 2rpx solid #eee;
  padding: 0 24rpx;
  font-size: 16px;
  background: #f5f5f5;
}
.search-btn {
  margin-left: 12rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background: #0D47A1;
  color: #fff;
  font-size: 16px;
  padding: 0 24rpx;
  border: none;
}
.count-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}
.count-label {
  font-size: 16px;
  color: #666;
}
.count-btn {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background: #E3F2FD;
  color: #0D47A1;
  font-size: 28px;
  border: none;
  margin: 0 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.count-value {
  font-size: 18px;
  font-weight: bold;
  margin: 0 12rpx;
}
.random-btn {
  width: 90vw;
  height: 80rpx;
  background: #1976D2;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 40rpx;
  margin: 0 auto 24rpx auto;
  border: none;
}
.recipe-list {
  padding: 0 24rpx;
}
.recipe-card {
  background: #F5F5F5;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4rpx;
}
.card-utensils {
  font-size: 14px;
  color: #888;
}
.card-emoji {
  font-size: 24px;
}
.tabbar {
  display: flex;
  flex-direction: row;
  height: 100rpx;
  background: #fff;
  border-top: 2rpx solid #E0E0E0;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
}
.tabbar-item.active {
  color: #1976D2;
  font-weight: bold;
}
.tabbar-emoji {
  font-size: 24px;
}
.tabbar-label {
  font-size: 12px;
  margin-top: 4rpx;
}
</style> 